{% comment to embed SVG directly %}
{% autoescape None %}

<html>
<head>
    <title>Nonogram</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
            type="text/javascript"></script>
    <script src="{{ static_url('script.js') }}" type="application/javascript"></script>
    <link href="{{ static_url('style.css') }}" type="text/css" rel="stylesheet"/>
    <link href="{{ static_url('svg.css') }}" type="text/css" rel="stylesheet"/>
</head>

<body>
<input type="hidden" id="board_mode" value="{{ board_mode }}"/>
<input type="hidden" id="board_id" value="{{ board_id }}"/>
<div class="header">
    <h1>Puzzle #{{board_id}}</h1>
    <div class="button">Start</div>

    <div>
        <label class="switch">
            <input type="checkbox" id="slider"/>
            <span class="slider round"></span>
        </label>

        <label for="slider">night mode</label>
    </div>
</div>

<hr/>

<div class="main">
    <div>
        <pre id="board">{{board_image}}</pre>
    </div>
    <div>
        <pre id="extra"></pre>
    </div>
</div>

</body>
</html>
